import { LanguageTypeString, QuestionType } from '@/components/question/typing';
import { getKey } from '@/components/question/utils';
import { Icon } from '@iconify/vue';
import { Checkbox, Divider, Input, Space } from 'ant-design-vue';
import { defineComponent, PropType } from 'vue';
import CommonAttributeComponent from '../common-attribute-component';
import CommonSettingButtons from '../common-setting-buttons';
import './style.css';

export default defineComponent({
  props: {
    question: {
      type: Object as PropType<QuestionType>,
    },
    language: {
      type: String as PropType<LanguageTypeString>,
      required: true,
    },
  },
  setup(props) {
    const { language, question } = props;
    const questionProper =
      language === 'zh' ? question?.questionProperZh : question?.questionProperEn;

    const addQuestionItem = () => {
      const itemTitle = language === 'zh' ? '选项-' : 'option-';
      questionProper?.items?.push({
        id: getKey(),
        key: getKey(questionProper.items.length),
        title: itemTitle + (questionProper.items.length + 1),
        value: questionProper.items.length,
        isDefault: false,
        isInput: false,
        isExclusion: false,
        isDesignAdd: true,
      });
    };

    const removeQuestionItem = (index: number) => {
      questionProper?.items?.splice(index, 1);
    };

    const setInputQuestionItem = (index: number) => {
      questionProper?.items?.forEach((eachItem, itemIndex) => {
        if (itemIndex === index) {
          if (eachItem.isInput === true) {
            eachItem.value = '';
          } else {
            eachItem.value = itemIndex + 1;
          }
        }
      });
    };

    return () => {
      return (
        <>
          <CommonAttributeComponent question={question} language={language} />
          <Divider plain={true}>选项</Divider>
          <Space>
            <div class="multiple-question-value-item-container" style="width: 100%">
              {questionProper?.items?.map((eachItem, index) => {
                return (
                  <Space class="multiple-question-value-item">
                    <Input v-model:value={eachItem.title} style="width: 200px">
                      {{
                        addonBefore: () => <Icon icon="material-symbols-light:check-box-outline" />,
                      }}
                    </Input>
                    <Space size={1}>
                      <span onClick={() => removeQuestionItem(index)}>
                        <Icon
                          icon="material-symbols-light:do-not-disturb-on-outline"
                          class="question-value-item-delete-icon"
                        />
                      </span>
                      <Checkbox
                        v-model:checked={eachItem.isInput}
                        onChange={() => setInputQuestionItem(index)}
                      >
                        填空
                      </Checkbox>
                      <Checkbox v-model:checked={eachItem.isExclusion}>互斥</Checkbox>
                      <Checkbox v-model:checked={eachItem.isDefault}>默认</Checkbox>
                    </Space>
                  </Space>
                );
              })}
            </div>
          </Space>
          <div style="text-align:center">
            <Space>
              <a onClick={addQuestionItem}>添加选项</a>
              <CommonSettingButtons question={question} language={language} />
            </Space>
          </div>
        </>
      );
    };
  },
});
